<template>
	<view class="cards">
		<view class="cards-front">
			<span class="cards-title">居家灵感</span>
			<ul class="lists">
				<li>·美居生活</li>
				<li>·居家好物</li>
				<li>·生活技巧</li>
			</ul>
		</view>
		<view class="cards-swiper">
			<swiper  :vertical="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item>
					<view class="swiper-item">
						<view class="card-box-all">
							<view class="card-box-top">
								<p class="demotitle">#</p>
								<p class="democard">巧用软装，改造自己喜欢的卧室</p>
							</view>
							<view class="card-box">
								<p class="card-box-li">软装改造</p>
								<p class="card-box-li">卧室</p>
								<p class="card-box-li">床品</p>
							</view>
						</view>
					</view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item">
						<view class="card-box-all">
							<view class="card-box-top">
								<p class="demotitle">#</p>
								<p class="democard">家具收纳如何合理分类</p>
							</view>
							<view class="card-box">
								<p class="card-box-li">家具收纳</p>
								<p class="card-box-li">厨房</p>
								<p class="card-box-li">卧室</p>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	
</script>

<style lang="scss" scoped>
.cards {
background: linear-gradient(to right, #f1e7de, #ebdbcc);  width: 96%;
  height: 250rpx;
  margin-left: 2%;
  border: 1px solid #ebdbcc;
  border-radius: 20rpx;
  overflow: hidden;

  .cards-front {
    height: 30%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    box-sizing: border-box;

    .lists {
      display: flex;
      font-size: 24rpx;
      gap: 20rpx;
    }

    .cards-title {
      font-weight: bold;
	  color: #1a1e1a;
    }
  }

  .cards-swiper {
    width: 100%;
    height: 80%;
    overflow: hidden;

    .swiper-item {
      width: 100%;
      height: 100%; /* 修改这里为100% */
      .card-box-all{
		  width: 90%;
		  height: 160rpx;
		  margin-left: 5%;
		  background-color: #f4f0ed;
		  border-radius: 10rpx;
		  .card-box-top{
			  display: flex;
			  width: 100%;
		  }
		  .demotitle{
			  width: 48rpx;
			  height: 48rpx;
			  background-color: #e4b786;
			  line-height: 48rpx;
			  text-align: center;
			  font-size: 38rpx;
			  color: #fff;
			  font-weight: bolder;
			  border-radius: 10rpx;
			  margin: 26rpx 20rpx 20rpx 20rpx;
		  }
	  }
      .swiper-image {
        width: 100%;
        height: 100%;
        background-color: bisque;
        object-fit: cover;
      }
	  .democard{
		  font-size: 32rpx;
		  font-weight: bold;
		  color: #222325;
		  margin-top: 26rpx;
	  }
	  .card-box{
		  display: flex;
		  gap: 16rpx;
		  margin-left: 20rpx;
		  width: 100%;
		  height: 36rpx;
	  }
	  .card-box-li{
		  width: 140rpx;
		  height: 36rpx;
		  font-size: 24rpx;
		  color: #c5ae8b;
		  background-color: #fff;
		  text-align: center;
		  line-height: 36rpx;
		  border-radius: 10rpx;
	  }
    }
  }
}
</style>